import { useState } from "react";
import { FaEye, FaEyeSlash } from "react-icons/fa";
import { RegisterApi } from "../../../http/module/LoginRegister/index";

const Register = () => {
  const [formData, setFormData] = useState({
    username: "LYC",
    email: "3288566340@qq.com",
    phone: "17828466468",
    password: "942021Lyc.",
    confirmPassword: "942021Lyc.",
  });

  const [errors, setErrors] = useState({});
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => setPasswordVisible(!passwordVisible);
  const toggleConfirmPasswordVisibility = () =>
    setConfirmPasswordVisible(!confirmPasswordVisible);

  // 处理输入变化
  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });

    // 实时验证
    if (e.target.name === "password") {
      validatePassword(e.target.value);
    } else if (e.target.name === "confirmPassword") {
      validateConfirmPassword(e.target.value);
    }
  };

  // 验证密码强度
  const validatePassword = (password) => {
    const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,}$/;
    if (!strongPasswordRegex.test(password)) {
      setErrors((prev) => ({
        ...prev,
        password:
          "Password must be at least 6 characters, include uppercase, lowercase, and a number.",
      }));
    } else {
      setErrors((prev) => ({ ...prev, password: "" }));
    }
  };

  // 验证确认密码
  const validateConfirmPassword = (confirmPassword) => {
    if (confirmPassword !== formData.password) {
      setErrors((prev) => ({
        ...prev,
        confirmPassword: "Passwords do not match!",
      }));
    } else {
      setErrors((prev) => ({ ...prev, confirmPassword: "" }));
    }
  };

  // 处理提交
  const handleSubmit = (e) => {
    e.preventDefault();
    if (formData.password !== formData.confirmPassword) {
      alert("Passwords do not match!");
      return;
    }
    if (errors.password || errors.confirmPassword) {
      alert("Please fix the errors before submitting.");
      return;
    }
    // 这里可以调用注册 API
    RegisterApi(formData).then((response) => {
      if (response.code === 200) {
        alert("Registration successful!");
      } else {
        alert("Registration failed: " + response.message);
      }
    });
  };

  return (
    <div className="max-w-md mx-auto mt-12 p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-semibold text-center text-gray-800 mb-6">
        Register
      </h2>
      <form onSubmit={handleSubmit} className="space-y-6">
        <div>
          <label className="block text-sm font-medium text-gray-700">
            Username
          </label>
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleChange}
            required
            className="w-full px-4 py-3 mt-1 border rounded-lg focus:ring focus:ring-blue-200 shadow-sm"
            placeholder="Enter your username"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">
            Email
          </label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
            className="w-full px-4 py-3 mt-1 border rounded-lg focus:ring focus:ring-blue-200 shadow-sm"
            placeholder="Enter your email"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">
            Phone
          </label>
          <input
            type="text"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            required
            className="w-full px-4 py-3 mt-1 border rounded-lg focus:ring focus:ring-blue-200 shadow-sm"
            placeholder="Enter your phone number"
          />
        </div>

        {/* 密码输入框 */}
        <div className="relative">
          <label className="block text-sm font-medium text-gray-700">
            Password
          </label>
          <input
            type={passwordVisible ? "text" : "password"}
            name="password"
            value={formData.password}
            onChange={handleChange}
            required
            className={`w-full px-4 py-3 mt-1 border rounded-lg focus:ring focus:ring-blue-200 shadow-sm ${
              errors.password ? "border-red-500" : ""
            }`}
            placeholder="Enter your password"
          />
          <button
            type="button"
            className="absolute right-3 top-9 text-gray-600"
            onClick={togglePasswordVisibility}
          >
            {passwordVisible ? <FaEyeSlash /> : <FaEye />}
          </button>
          {errors.password && (
            <p className="text-red-500 text-xs">{errors.password}</p>
          )}
        </div>

        {/* 确认密码输入框 */}
        <div className="relative">
          <label className="block text-sm font-medium text-gray-700">
            Confirm Password
          </label>
          <input
            type={confirmPasswordVisible ? "text" : "password"}
            name="confirmPassword"
            value={formData.confirmPassword}
            onChange={handleChange}
            required
            className={`w-full px-4 py-3 mt-1 border rounded-lg focus:ring focus:ring-blue-200 shadow-sm ${
              errors.confirmPassword ? "border-red-500" : ""
            }`}
            placeholder="Confirm your password"
          />
          <button
            type="button"
            className="absolute right-3 top-9 text-gray-600"
            onClick={toggleConfirmPasswordVisibility}
          >
            {confirmPasswordVisible ? <FaEyeSlash /> : <FaEye />}
          </button>
          {errors.confirmPassword && (
            <p className="text-red-500 text-xs">{errors.confirmPassword}</p>
          )}
        </div>

        <button
          type="submit"
          className="w-full py-3 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-md"
        >
          Register
        </button>
      </form>
    </div>
  );
};

export default Register;
